<template>
  <div class="center">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2" style="height:10%;">
        <span><i class="iconfont icon-align-left"></i></span>
        <span class="fs-xl text mx-2 mb-1" style="font-size:18px"  @click="goToinpatientsDetailsView">专科护理操作眼科</span>
      </div>
      <div class="d-flex mt-1 jc-center body-box" style="width:100%;height:100%;">
        <dv-scroll-ranking-board
          :config="config"
          class="dv-scr-rank-board"
          style="width:95%;height:258px;font-size:30px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, onMounted, onUnmounted, toRefs} from "vue";
import axios from 'axios';
export default defineComponent({
  setup() {
  const state = reactive({
    config: { // 将 config 嵌套在 reactive 对象中，便于整体更新
      data: [],
      rowNum: 5,
    }
  });

    // 定义定时器变量，用于后续清除
    let refreshTimer = null;

    // 数据获取函数
    const fetchData = async () => {
      try {
        const response = await axios.get( window.globalConfig.baseApi +"/api/Nurse/GetAllStatisticsDataJson?IDataType=4");
        //console.log("接口返回数据：", response.data);
        
        var convertedData = response.data.map(item => ({
          name: item.iiiDataType || item.IDataType,
          value: Number(item.number)
        }));
         state.config = {
        ...state.config,
        data: convertedData
      };
        console.log("获取数据成功:", convertedData);

      } catch (error) {
        console.error("获取数据失败:", error);
        config.data = [{ name: "数据加载失败", value: 0 }];
      }
    };

    // 组件挂载时执行
    onMounted(() => {
      // 初始加载一次数据
      fetchData();
      
      // 设置定时器，每30秒刷新一次数据（时间可根据需求调整）
      refreshTimer = setInterval(fetchData, 10*60*1000);
    });

    // 组件卸载时执行
    onUnmounted(() => {
      // 清除定时器，避免内存泄漏
      if (refreshTimer) {
        clearInterval(refreshTimer);
        refreshTimer = null;
      }
    });

   return { ...toRefs(state) }; 
  },
  methods: {
    goToinpatientsDetailsView() {
      this.$router.push({ name: 'FenYangZKHLYK' })
    }
  }
});
</script>

<style lang="scss" scoped>
$box-height: 100%;
$box-width: 98%;
.center {
  width: 100%;
  height:100%;
  padding: 10px 10px;
  margin-top:7px;
  overflow: visible;
  .bg-color-black {
    overflow: visible;
    margin: 0px auto;
    width: $box-width;
    height: $box-height;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
</style>
